<template>
  <v-container fluid grid-list-md>
    <v-layout row wrap>
      <v-flex xs10 md6>
        <v-card>
          <v-card-text class="px2">
            <div ref="sale" style="width: 100%;height:350px"></div>
          </v-card-text>
        </v-card>
      </v-flex>

      <v-flex xs10 md6>
        <v-card >
          <v-card-text class="px2">
            <div ref="pie" style="width: 100%;height:350px"></div>
          </v-card-text>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
  // 引入 ECharts 主模块
  var echarts = require('echarts/lib/echarts');
  require('echarts/lib/chart/bar');
  require('echarts/lib/chart/pie');

  export default {
    name: "dashboard",
    data(){
      return {

      }
    },
    mounted(){
      this.$nextTick(() => {
        var sale = echarts.init(this.$refs.sale);
        this.$http.post("http://localhost:10010/api/item/tongji/TongjiUserAndPaoTui").then(res=>{
          var xdata = new Array()
          var ydata = new Array()
          res.data.forEach(function (user) {
            xdata.push(user.name)
            ydata.push(user.value)
          })
          // 指定图表的配置项和数据
          var option = {
            title: {
              text: '跑腿和用户人数'
            },
            tooltip: {},
            legend: {
              data:['销量']
            },
            xAxis: {
              data: xdata
            },
            yAxis: {},
            series: [{
              name: '人数',
              type: 'bar',
              data: ydata
            }]
          };
          // 使用刚指定的配置项和数据显示图表。
          sale.setOption(option);
        })
      })

      const pie = echarts.init(this.$refs.pie);

      this.$http.post("http://localhost:10010/api/item/tongji/TongjiStatusCount").then(res=>{
        var xdata = new Array()
        var ydata = new Array()
        res.data.forEach(order=>{
          xdata.push(order.name)
          ydata.push({value: order.value, name: order.name})
        })

        pie.setOption({
          roseType: 'angle',
          tooltip: {
            show: true
          },
          title: {
            text: xdata
          },
          series : [
            {
              name: xdata,
              type: 'pie',
              radius: '100%',
              data:ydata
            }
          ],
          itemStyle: {
            emphasis: {
              // 阴影的大小
              shadowBlur: 100,
              // 阴影水平方向上的偏移
              shadowOffsetX: 20,
              // 阴影垂直方向上的偏移
              shadowOffsetY: 20,
              // 阴影颜色
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },

        })

      })

  }
  }
</script>

<style scoped>

</style>

